<template>
  <div>
    <!--// 用户列表-->
    <textTable
      :tableTitle="tableTitle"
      :tableHead="tableHeadValue"
      :tableData="tableData"
      :page="page"
      :btnGroup="btnGroup"
      @add="add"
      @messageScope="messageScope"
      @editScope="editScope"
      @removeScope="removeScope"
      @openScope="openScope"
      @closeScope="closeScope"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @removeAll="removeAll"
    ></textTable>

    <!--弹出框-->
    <model :modelSetting="modelSetting"
           @cancleModel="cancleModel"
           @sureModel="sureModel">
      <div slot="modalSlot" v-if="!isAdd" class="modalCon">
        <span class="message">订单状态</span>
        <el-form :label-position="labelPosition" label-width="100px" :model="formValue">
          <el-select v-model="formValue.status" placeholder="请选择订单状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form>
      </div>
      <div slot="modalSlot" v-if="isAdd" class="modalCon">
        <span class="message">订单详情</span>
        <el-table
          :data="modalData"
          style="width: 100%">
          <el-table-column
            prop="productPO.productName"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="productPO.price"
            label="商品单价">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="商品数量">
          </el-table-column>
          <el-table-column
            prop="subtotal"
            label="小计">
          </el-table-column>
          <el-table-column
            prop="shopPO.shopName"
            label="所属店铺">
          </el-table-column>
        </el-table>
      </div>
    </model>
  </div>
</template>

<script>
import textTable from 'components/textTable.vue'
// 全部引用
import model from 'components/model.vue'
// 全部引用 部分的使用
import * as api from 'api/api.js'
const tableHead = [
  {
    key: 'id',
    value: '订单唯一id'
  }, {
    key: 'picture',
    value: '下单用户头像'
  }, {
    key: 'userPO.userName',
    value: '下单用户昵称'
  }, {
    key: 'orderNumber',
    value: '订单号'
  }, {
    key: 'statusName',
    value: '订单状态'
  }, {
    key: 'createDate',
    value: '订单时间'
  }, {
    key: 'totalPrice',
    value: '订单金额'
  }, {
    key: 'address',
    value: '收货地址'
  }
]
const form = {
  productName: '',
  productImage: '',
  status: '',
  price: '',
  shopPO: {
    className: '',
    shopName: ''
  }
}
const search = {
  usex: ''
}
export default {
  data () {
    return {
      tableHeadValue: _.cloneDeep(tableHead),
      formValue: _.cloneDeep(form),
      searchValue: _.cloneDeep(search),
      labelPosition: 'left',
      tableData: [],
      page: {
        pageNo: 1,
        pageSize: 10,
        pageTotal: 10000
      },
      // 上面不用动
      tableTitle: '订单列表',
      modelSetting: {
        title: '订单信息',
        isShow: false,
        width: '60%'
      },
      imageUrl: '',
      btnGroup: {
        add: false,
        deleted: false,
        edit: true,
        message: true,
        choose: false,
        open: false,
        close: false
      },
      apiUpload: '',
      imgBase: '',
      unUpload: false,
      isAdd: true,
      options: [{
        value: '0',
        label: '待发货'
      }, {
        value: '1',
        label: '已发货'
      }, {
        value: '2',
        label: '已完成'
      }],
      modalData: []
    }
  },
  // 声明你的组件**********************
  components: {
    textTable, // 小写大写，不允许出现下划线
    model
  },

  methods: {
    handleAvatarSuccess (res, file) {
      this.formValue.imageUrl = res.data.imgPath
      this.imageUrl = this.imgBase + res.data.imgPath
      this.unUpload = true
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    imgUploadimg () {
      this.apiUpload = api.imgUploadimg
      this.imgBase = api.imgBase
    },
    // 查询
    searchData () {
      console.log('查询')
    },
    // 新建
    add () {
      this.imageUrl = ''
      this.unUpload = false
      this.isAdd = true
      this.formValue = _.cloneDeep(form)
      this.modelSetting.isShow = true
    },

    // 确定按钮
    sureModel () {
      // 编辑
      if (!this.isAdd) {
        let data = {
          id: this.formValue.editId,
          status: this.formValue.status * 1
        }
        api.orderUpdate(data).then((res) => {
          if (res.code * 1 === 200) {
            this.formValue = _.cloneDeep(form)
            this.modelSetting.isShow = false
            this.getOrderList()
            this.formValue.editId = ''
          } else {
            this.$message(res.message)
          }
        })
      }
      this.imageUrl = ''
    },

    // 取消按钮
    cancleModel () {
      this.formValue = _.cloneDeep(form)
      this.imageUrl = ''
      this.unUpload = false
      this.modelSetting.isShow = false
    },

    // 查看详情
    messageScope (val) {
      this.isAdd = true
      this.modelSetting.isShow = true
      this.modalData = val.orderItemPOS
      console.log(val)
    },

    // 编辑
    editScope (val) {
      this.unUpload = true
      this.isAdd = false
      this.formValue = val
      this.formValue.editId = val.id
      // this.formValue.imageUrl = val.picture
      // this.imageUrl = this.imgBase + val.picture
      this.modelSetting.isShow = true
    },

    // 删除
    removeScope (val) {
      let data = {
        id: val.id
      }
      api.productDelete(data).then((res) => {
        if (res.code === 200) {
          this.getOrderList()
        } else {
          this.$message('删除失败，请重试')
        }
      })
    },

    // 开启
    openScope (val) {
      console.log(val)
    },

    // 关闭
    closeScope (val) {
      console.log(val)
    },

    // 每页条数
    handleSizeChange (val) {
      console.log(val)
    },

    // 跳页
    handleCurrentChange (val) {
      this.page.pageNo = val * 1
      this.getOrderList()
    },

    // 批量删除
    removeAll (val) {
      console.log(val)
    },

    getOrderList () {
      let data = {
        pageNum: this.page.pageNo,
        pageSize: 10
      }
      api.getOrderList(data).then((res) => {
        let resData = res.data
        resData.map(item => {
          item.picture = item.userPO.userInfoPO.image
          item.address = item.addressPO.province + item.addressPO.area + item.addressPO.city + item.addressPO.particular
          switch (item.status * 1) {
            case 0:
              item.statusName = '待发货'
              break
            case 1:
              item.statusName = '已发货'
              break
            case 2:
              item.statusName = '已完成'
              break
          }
        })
        this.tableData = resData
        this.page.pageTotal = res.totalSize
      })
    }
  },
  mounted () {
    this.getOrderList()
  }
}
</script>

<style scoped>
  .modalCon{
    text-align: center;
  }
  .avatar-uploader el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 87px;
    height: 87px;
    line-height: 87px;
    text-align: center;
  }
  .avatar {
    width: 87px;
    height: 87px;
    display: block;
  }
  .message {
    display: block;
    margin-bottom: 50px;
  }
  .search_box {
    background-color: white;
    padding: 10px;
  }
</style>
